@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$progress: () !default;
$progress: map.merge(
  (
    track-bg-color: get-css-var('fill-color-humble'),
    filler-bg-color: get-css-var('color-primary-base'),
    info-color: inherit,
    info-color-inside: get-css-var('color-white'),
    info-color-bubble: inherit,
    percentage-font-size: get-css-var('font-size-secondary'),
    activated-color: rgba(#fff, 0.4),
    activated-dir: 1,
    animation-duration: 2400ms,
    animation-timing: ease
  ),
  $progress
);

.#{$namespace}-progress {
  &-vars {
    @include define-preset-values('progress', $progress);
  }

  @include basis;

  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;

  &__track {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 1;
    background-color: get-css-var('progress-track-bg-color');
  }

  $percent-translate: translateX(calc(#{get-css-var('progress-percentage')} * 1% - 100%));
  $percent-translate-rtl: translateX(calc(100% - #{get-css-var('progress-percentage')} * 1%));
  $activated-scale: scaleX(calc(#{get-css-var('progress-percentage')} * 0.01));

  &__filler {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    background-color: get-css-var('progress-filler-bg-color');
    will-change: transform;
    transition: get-css-var('transition-transform');
    transform: $percent-translate;

    @include rtl {
      transform: $percent-translate-rtl;
    }
  }

  &--activated &__filler::after {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    content: '';
    background-color: get-css-var('progress-activated-color');
    transform-origin: right;
    animation: #{$namespace}-progress-flowing get-css-var('progress-animation-duration') get-css-var(
        'progress-animation-timing'
      ) infinite;

    @include rtl {
      @include define-css-var('progress-activated-dir', -1);

      transform-origin: left;
    }
  }

  @keyframes #{$namespace}-progress-flowing {
    0% {
      opacity: 100%;
      transform: translateX(
          calc(
            #{get-css-var('progress-percentage')} * #{get-css-var('progress-activated-dir')} * -1%
          )
        )
        scaleX(0);
    }

    70% {
      opacity: 0%;
      transform: translateX(0) $activated-scale;
    }

    100% {
      opacity: 0%;
      transform: translateX(0) $activated-scale;
    }
  }

  &__info {
    display: flex;
    align-items: center;
    margin-inline-start: 8px;
    color: get-css-var('progress-info-color');
    pointer-events: none;
  }

  &--info-inside &__info {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    justify-content: flex-end;
    width: 100%;
    padding-inline-end: 8px;
    margin: 0;
    color: get-css-var('progress-info-color-inside');
    transition: get-css-var('transition-transform');
    transform: $percent-translate;

    @include rtl {
      transform: $percent-translate-rtl;
    }
  }

  &--info-bubble &__info,
  &--info-bubble-top &__info,
  &--info-bubble-bottom &__info {
    min-width: auto;
    min-height: auto;
    padding: 1px 4px;
    margin: 0;
    color: get-css-var('progress-info-color-bubble');
  }

  &--info--none &__info {
    display: none;
  }

  &__percentage {
    font-size: get-css-var('progress-percentage-font-size');
    pointer-events: auto;
  }

  &__reference {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 100%;
    pointer-events: none;
    transition: get-css-var('transition-transform');
    transform: $percent-translate;

    @include rtl {
      transform: $percent-translate-rtl;
    }
  }

  &__bubble {
    position: absolute;
    inset-inline-end: 0;
    pointer-events: auto;
    transform: translateX(50%);

    @include rtl {
      transform: translateX(-50%);
    }
  }
}
